<template>
  <div class="example">
    <button class="content">
      <slot></slot>
      <slot name="title"></slot>
    </button>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
/* 直接修改插槽元素的样式，不生效 */
// .example {
//   .unname-class {
//     color: red;
//   }
// }

/* 使用:slotted()插槽选择器可以修改插槽内元素的样式 */
.example {
  :slotted(.unname-class) {
    color: red;
  }
  :slotted(.name-class) {
    color: orange;
  }
}
</style>
